<template>
  <div class="chat-dialog" style="margin-left:20px;margin-top: 20px;">
    <div class="chat-header">
      <div style="margin:auto">聊天小客服</div>
    </div>
    <div class="chat-body">
      <ul class="chat-list">
        <li
          v-for="(message, index) in messages"
          :key="index"
          :class="{ 'left': message.side === 'left', 'right': message.side === 'right' }"
        >
          <div class="message">
            <i class="el-icon-s-custom" />
            {{ message.content }}
          </div>
        </li>
      </ul>
    </div>
    <div class="chat-footer">
      <input v-model="newMessage" type="text" placeholder="输入消息" @keyup.enter="sendMessage">
      <button class="btn btn-primary" @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    title: String,
    messages: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      newMessage: ''
    }
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() === "") {
        return;
      }

      const newMsg = {
        content: this.newMessage,
        side: 'right'
      }
      this.$emit('new-message', newMsg)
      this.messages.push(newMsg)
      this.newMessage = ''
      const params = {
        messages: [{ 'content': newMsg.content, 'role': 'user' }],
        'model': 'gpt-3.5-turbo-0301',
        max_tokens: 4000,
        temperature: 0
      }
      const apiKey = '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'
      axios({
        method: 'post',
        url: 'https://api.openai.com/v1/chat/completions',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${apiKey}`
        },
        data: params
      })
        .then(response => {
          console.log(response.data.choices[0].message.content)
          // newMsg.content = response.data.choices[0].message.content
          const newMsg = {
            content: response.data.choices[0].message.content,
            side: 'left'
          }
          this.$emit('new-message', newMsg)
          this.messages.push(newMsg)
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<style scoped>
.chat-dialog {
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  max-width: 600px;
}

.chat-header {
  background-color: #3f51b5;
  border-radius: 6px 6px 0 0;
  color: #fff;
  padding: 8px 16px;
}

.chat-body {
  height: 500px;
  overflow-y: auto;
  padding: 16px;
  margin-top: 10px;
  width:100%
}

.chat-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.chat-list li {
  margin-bottom: 8px;
}

.chat-list li.left .message {
  background-color: #f2f2f2;
  border-radius: 6px 6px 6px 0;
  color: #333;
  /* margin-left: 20px; */
  padding: 8px 16px;
}

.chat-list li.right .message {
  background-color: #3f51b5;
  border-radius: 6px 6px 0 6px;
  color: #fff;
  /* margin-right: 20px; */
  padding: 8px 16px;
}

.chat-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f2f2f2;
  border-radius: 0 0 6px 6px;
  padding: 8px 16px;
}

.chat-footer input {
  border: none;
  border-radius: 4px;
  box-shadow: none;
  flex-grow: 1;
  font-size: 14px;
  padding: 8px 16px;
}

.btn {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  transition: background-color 0.3s
}

.btn-primary {
  background-color: #3f51b5;
  color: #fff;
}

.btn-primary:hover {
  background-color: #2c3e50;
}
</style>
